<template>
    <div>
        <mt-header fixed :title="title">
            <router-link to="/" slot="left">
                <mt-button @click="goback" v-show="flag" type="danger" icon="back">返回</mt-button>
            </router-link>
            <mt-button @click="showSideBar" icon="more" slot="right"></mt-button>
        </mt-header>
        <mt-popup v-model="flags" position="left">
            <div class="popupcontainer">
                <div class="topcontainer">
                    <div class="avatar">
                        <img :src="avatarimg.avatar" alt="加载中...">
                    </div>
                    <div class="username">
                        <div>{{userinfo.username}}</div>
                    </div>
                </div>
                <div class="bottomcontainer">
                    <div @click="goorder">订单</div>
                    <div @click="goshopcar">购物车</div>
                    <div @click="gofav">收藏</div>
                    <div @click="gouserinfos">我的信息</div>
                </div>
            </div>
        </mt-popup>
    </div>
</template>


<script>
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            flag: false,
            flags: false,
            userinfo: {},
            avatarimg:""
        };
    },
    methods: {
        // 跳转到订单页
        goorder() {
            this.$router.push({ name: "order" });
        },
        // 跳转到收藏页
        gofav() {
            this.$router.push({ name: "fav" });
        },
        // 跳转到购物车页
        goshopcar() {
            this.$router.push({ name: "shopcar" });
        },
        // 跳转到用户信息页
        gouserinfos() {
            this.$router.push({ name: "userinfos" });
        },
        // 根据token显示侧边导航或跳转到登录页
        showSideBar() {
            let mytoken = window.localStorage.getItem("token");
            if (mytoken == null) {
                this.$router.push({ name: "login" });
            } else {
                this.$ajax.get("/user").then(res => {
                    ////////////console.log(res.data);
                    this.userinfo = res.data;
                });
                this.$ajax.get("/avatar").then(res => {
                    ///////console.log(res.data);
                    this.avatarimg = res.data.results.pop();
                    //this.userinfo = res.data;
                });
                this.flags = true;
            };

        },
        // 返回上一级
        goback() {
            this.$router.go(-1);
        }
    },
    created() {
        //路由不在首页位置，但是刷新了页面--路由地址并未改变，所以无法监听到，即需要在页面创建的时候也进行一次判断
        this.flag = this.$route.path === "/home" ? false : true;
    },
    props: ["title"],
    watch: {
        "$route.path": function(nval) {
            //监听路由地址：当路由回到首页的时候影藏“返回按钮”
            if (nval === "/home") {
                this.flag = false;
            } else {
                this.flag = true;
            }
        }
    }
};
</script>


<style lang="scss">
.mint-popup {
    width: 60%;
    height: 100%;
}
.popupcontainer {
    height: 100%;
    width: 100%;
    background-color: rgb(44, 42, 42);
    .topcontainer {
        width: 100%;
        height: 30%;
        padding-top: 5px;
        background-color: rgb(138, 174, 190);
        .avatar {
            width: 150px;
            height: 150px;
            margin: 0px auto;
            border-radius: 50%;
            background-color: yellowgreen;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .username {
            width: 100%;
            margin-top: 10px;
            display: flex;
            font-size: 0.9rem;
            div:nth-child(1) {
                width: 100%;
                text-align: center;
                color: rgb(51, 59, 66);
            }
        }
    }
    .bottomcontainer {
        width: 100%;
        height: 60%;
        div {
            width: 80%;
            margin: 15px auto;
            text-align: center;
            font-size: 1rem;
            color: aliceblue;
            border-bottom: 1px solid #ccc;
        }
    }
}
</style>